<template>
	<view class="sigin">
		 <view class="circle" @click="setStatus">
			 <view class="box">
				 <view class="text">
					 {{isDo === true ? '已签到':'未签到'}}
				 </view>
				 <view class="date">{{getDate()}}</view>
				 <!-- <view class="date">{{getTime()}}</view> -->
			 </view>
		 </view>
	</view>
</template>


<script setup>
	import { ref } from 'vue';
	
	// 定义布尔值
	const isDo = ref(false)
	
	// 定义方法 设置是否签到
	const setStatus = async ()=> {
		// 设置布尔值为true
		isDo.value = true;
	}
	
	// 定义方法获取当前日期时间
	const getDate = ()=> {
		let dt = new Date();
		let YY = dt.getFullYear();
		let MM = dt.getMonth() + 1;
		let DD = dt.getDate();
		MM = MM < 10 ? '0'+MM:MM;
		DD = DD < 10 ? '0'+DD:DD;
		return `${YY}:${MM}:${DD}`
	}
	
	const getTime = ()=> {
		let dt = new Date();
		let h = dt.getHours();
		let m = dt.getMinutes()
		let s = dt.getSeconds();
		return `${h}:${m}:${s}`
	}

</script>

<style lang="scss">
@import '../../uni.scss';
.sigin {
	width: 100%;
	height: 240rpx;
	// background-color: pink;
	display: flex;
	justify-content: center;
	align-items: center;
	.circle {
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #f0f0f0;
		background-color: $bg_btn_color;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		// 2. 使用动画
		animation-name: ani;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		.box {
			text-align: center;
			.text {
				font-size: 32rpx;
			}
			.date {
				margin-top: 12rpx;
				font-size: 24rpx;
			}
		}
	}
}

// 1. 定义动画
@keyframes ani {
	0% {
		// 盒子阴影
		box-shadow: 0px 0px 2px  #ccc;
	}
	50% {
		box-shadow: 0px 0px 30px  #ccc;
	}
	100% {
		box-shadow: 0px 0px 2px  #ccc;
	}
}
</style>